<template>
	<view class="headWrapper" :style="{backgroundColor}">
		<!-- #ifdef MP-WEIXIN -->
		<view :style="{ height:fiexdHeight +'px',marginBottom:isFiexdShadow?'30rpx':'0'}"></view>
		<view :class="isFiexdShadow ? 'fiexd fiexdHead isFiexdShadow' : 'fiexd fiexdHead'">
			<view class="header-wrap" :style="{
				height: navHeight + 'px', 
				paddingTop: statusBarHeight + 'px',
				paddingLeft: '30rpx'
				}">

				<!-- 详情页面头部 -->
				<view v-if="type == 'detail'" class="detailHead" :style="{width:publicWidthInfo.width}">
					<view class="leftIcon" :style="{width:publicWidthInfo.iconWidth}">
						<view :class="pathType=='company'?'back whiteBack':'back'" @click="goback"></view>
						<view :class="pathType=='company'?'home whiteHome':'home'" @click="goIndex"></view>
					</view>
					<view class="title" :style="{width:publicWidthInfo.titleWidth}">
						<text :class="pathType=='company'?'titleText titleTextWhite':'titleText'" v-if="isScroll">
							{{title}}
						</text>
						<view v-else class="scrollBox" :style="{width: scrollWidth + 'px' }">
							<text class="scrollInner">
								{{title}}
							</text>
							<text class="space"></text>
							<text class="scrollInner">
								{{title}}
							</text>
						</view>
					</view>
				</view>
				<!-- 招聘会详情头部 -->
				<view v-if="type == 'JobfairolShow'" class="detailHead" :style="{width:publicWidthInfo.width}">
					<view class="leftIcon" :style="{width:publicWidthInfo.iconWidth}">
						<view class="back" @click="goback"></view>
						<view class="home" @click="goIndex"></view>
					</view>
					<view class="title" :style="{width:publicWidthInfo.titleWidth}">
						<text class="titleText" v-if="isScroll">
							{{title}}
						</text>
						<view v-else class="scrollBox" :style="{width: scrollWidth + 'px' }">
							<text class="scrollInner">
								{{title}}
							</text>
							<text class="space"></text>
							<text class="scrollInner">
								{{title}}
							</text>
						</view>
					</view>
				</view>
				<!-- 详情页面头部 -->

				<!-- 搜索页面头部 -->
				<view v-if="type == 'search'" class="searchHead" :style="{width:publicWidthInfo.width}">
					<view class="leftIcon">
						<view class="back" @click="goback"></view>
					</view>
					<u-search height="70rpx" v-model="keyword" :clearabled="false" shape="round"
						:bg-color="searchBgColor" :show-action="true" :input-style="searchIndexIptStyle"
						:action-style="searchIptBtnStyle" placeholder="寻找好工作" @click="handleEmit"
						@custom="handleEmit" @search="handleEmit"></u-search>
				</view>
				<!-- 搜索页面头部 -->

				<!-- 搜索结果页面头部 -->
				<view v-if="type == 'searchShow'" class="searchHead" :style="{width:publicWidthInfo.width}">
					<view class="leftIcon">
						<view class="back" @click="goback"></view>
					</view>
					<u-search height="70rpx" shape="round" :bg-color="searchBgColor" v-model="keyword"
						:show-action="false"
						:input-style="{width:'340rpx',color:'#838383',fontSize:'26rpx',height:'60rpx'}"
						placeholder="寻找好工作" @clear="handleIptClear" @search="handleEmit"></u-search>
				</view>
				<!-- 搜索结果页面头部 -->

				<!-- 职位列表页面头部 -->
				<view v-if="type == 'jobList'" class="jobListHead" :style="{width:publicWidthInfo.width}">
					<view style="width: 320rpx; margin-left: 50rpx; margin-right: 60rpx;">
						<u-search height="70rpx" @click="handleSearchJump" @custom="handleSearchJump"
							:input-style="searchIptStyle" disabled shape="round" :bg-color="searchBgColor"
							:show-action="false" placeholder="寻找好工作"></u-search>
					</view>
					<view class="address" @click="vicinityClick()">
						<text class="addrText">附近</text>
					</view>
				</view>
				<!-- 职位列表页面头部 -->

				<!-- 人才列表 -->
				<view v-if="type == 'resumeList'" class="jobListHead" :style="{width:publicWidthInfo.width}">
					<view style="width: 320rpx; margin-left: 50rpx; margin-right: 60rpx;">
						<u-search height="70rpx" @click="handleSearchJump" @custom="handleSearchJump"
							:input-style="searchIptStyle" disabled shape="round" :bg-color="searchBgColor"
							:show-action="false" placeholder="寻找好工作"></u-search>
					</view>
				</view>
				<!-- 人才列表 -->

				<!-- 首页头部 -->
				<view v-if="type == 'index'" class="indexHead">
					<view class="logo">
						<image :src="config.logo"></image>
					</view>
					<view class="searchBox" :style="{width:publicWidthInfo.titleWidth}">
						<view style="margin-right: 40rpx; margin-left: 20rpx;">
							<u-search height="70rpx" :input-style="searchIptStyle" disabled shape="round"
								:bg-color="searchBgColor" :show-action="false" placeholder="寻找好工作"
								@click="handleSearchJump" @custom="handleSearchJump"></u-search>
						</view>
					</view>
				</view>
				<!-- 首页头部 -->

				<!-- 列表页面头部 -->
				<view v-if="type == 'list'" class="listHead" :style="{width:publicWidthInfo.width}">
					<view class="leftIcon" :style="{width:publicWidthInfo.iconWidth}">
						<view class="back" @click="goback"></view>
						<view class="search" @click="handleSearchJump"></view>
					</view>
					<view class="title" :style="{width:publicWidthInfo.titleWidth}">
						{{title}}
					</view>
				</view>
				<!-- 列表页面头部 -->
				<!-- 添加收藏提示 -->
				<view class="collectTips" v-if="isHeadTips">
					添加小程序，寻找好工作
					<u-icon name="close" class="tipsClose" color="#a1c0ff" size="28" @click="handleTipsClose"></u-icon>
				</view>
				<!-- 添加收藏提示 -->
			</view>
			<view>
				<slot></slot>
			</view>
		</view>
		<!-- #endif -->

		<!-- #ifdef MP-TOUTIAO || MP-ALIPAY -->
		<view :style="{ height:fiexdHeight +'px',marginBottom:isFiexdShadow?'30rpx':'0'}"></view>
		<view :class="isFiexdShadow ? 'fiexd fiexdHead isFiexdShadow' : 'fiexd fiexdHead'">
			<view class="toutiao">
				<!-- 搜索框 -->
				<view v-if="type == 'index'" class="search">
					<view class="logo">
						<image :src="config.logo"></image>
						<!-- <image src="https://www.qcbjob.com/upload/files/20221010/f7d754d03deb2ad3d8ee80ed25637b7b.png"></image> -->
					</view>
					<u-search height="70rpx" placeholder="输入职位名称" :bg-color="searchBgColor"
						:input-style="searchInputStyle" :action-style="actionStyle" disabled @click="handleSearchJump"
						@custom="handleSearchJump"></u-search>
				</view>
				<!-- 搜索框 -->
				<view v-if="type == 'jobList' || type == 'list' || type == 'resumeList'" class="list">
					<u-search height="70rpx" placeholder="输入企业名称" disabled :input-style="searchInputStyle"
						:bg-color="searchBgColor" :action-style="actionStyle" @click="handleSearchJump"
						@custom="handleSearchJump"></u-search>
				</view>
			</view>
			<view>
				<slot></slot>
			</view>
		</view>
		<!-- 添加收藏提示 -->
		<view class="collectTips" v-if="isHeadTips">
			添加小程序，寻找好工作
			<u-icon name="close" class="tipsClose" color="#a1c0ff" size="28" @click="handleTipsClose"></u-icon>
		</view>
		<!-- 添加收藏提示 -->
		<!-- #endif -->
	</view>
</template>

<script>
	/**
	 * @type detail详情页面 index首页  list列表页面 jobList职位列表 resumeList人才列表 search搜索页面 searchShow 搜索结果页面
	 * */
	import NoticeBar from './NoticeBar.vue'
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		name: "Head",
		props: {
			title: {
				type: String,
				default: '首页'
			},
			type: {
				type: String,
				default: 'index'
			},
			pathType: {
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: true
			},
			isWhiteBg: {
				type: [Boolean, String],
				default: false
			},
			backgroundColor: {
				type: String,
				default: 'transparent'
			},
		},
		components: {
			NoticeBar
		},
		data() {
			return {
				keyword: '',
				navHeight: '',
				statusBarHeight: '',
				menuButtonPaddingRight: '',
				menuButtonWidth: '',
				publicWidthInfo: {},
				searchIptBtnStyle: {
					background: 'linear-gradient(45deg, #1360FF, #3C7CFF)',
					height: '100%',
					color: '#fff',
					borderRadius: '30rpx',
					padding: '12rpx 26rpx',
					marginLeft: '20rpx',
					width: '110rpx',
					fontSize: '26rpx',
					height: '60rpx'
				},
				actionStyle: {
					background: 'linear-gradient(45deg, #1360FF, #3C7CFF)',
					color: '#fff',
					padding: '16rpx 30rpx',
					borderRadius: '36rpx',
					width: '124rpx',
					marginLeft: '20rpx',
					fontSize: '15px'
				},
				searchInputStyle: {
					color: '#838383',
					fontSize: '14px',
					padding: '8rpx 0',
					height: '60rpx'
				},
				searchIptStyle: {
					width: '180rpx',
					color: '#838383',
					fontSize: '26rpx',
					height: '60rpx'
				},
				searchIndexIptStyle: {
					width: '220rpx',
					color: '#838383',
					fontSize: '26rpx',
					height: '60rpx'
				},
				scrollWidth: 0,
				isScroll: true,
				time: null,
				searchBgColor: '#fff',
				fiexdHeight: '',
				isFiexdShadow: false
			};
		},
		created() {
			this.sysInfo()
		},
		watch: {
			title(val) {
				if (this.type == 'detail' || this.type == 'JobfairolShow') {
					// #ifdef MP-WEIXIN
					this.countScrollWidth()
					// #endif
				}
			},
			isWhiteBg(val) {
				// 2023.07.31：修复网络招聘会和招聘会详情向上滑动头部背景色变白
				if (val) {
					this.isFiexdShadow = true
				} else {
					this.isFiexdShadow = false
				}
			}
		},
		mounted() {
			let info = uni.createSelectorQuery().in(this).select(".fiexdHead");
			info.boundingClientRect((data) => {
				this.fiexdHeight = data.height
			}).exec(function(res) {
				// 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据
			})
			uni.$on('onPageScroll', (data) => {
				//是否显示
				if (data <= 10) {
					this.isFiexdShadow = false
					this.searchBgColor = '#fff'
				} else {
					this.isFiexdShadow = true
					this.searchBgColor = '#f3f3f3'
				}
			})
			this.time = setTimeout(() => {
				this.setHeadTips(false)
				clearTimeout(this.time)
			}, 6000)
		},
		computed: {
			...mapState(['config', 'isHeadTips', 'LoginType'])
		},
		methods: {
			...mapMutations(['setHeadTips']),
			initShareData(params) {
				console.log(params, 'params 搜索页面分享==头部')
			},
			vicinityClick() {
				uni.showToast({
					icon: 'none',
					title: '开发中'
				})
			},
			// 跳转搜索页面
			handleSearchJump() {
				let pages = getCurrentPages()
				let currentRouter = pages[pages.length - 1].route
				let routers = [{
						url: 'views/Index',
						type: 'job'
					},
					{
						url: 'commonViews/EmergencyList',
						type: 'job'
					},
					{
						url: 'views/JobList',
						type: 'job'
					},
					{
						url: 'views/ResumeList',
						type: 'resume'
					},
					{
						url: 'commonViews/FamousList',
						type: 'company'
					},
					{
						url: 'views/CompanyList',
						type: 'company'
					},
				]
				let currentType = {}
				for (let i = 0; i < routers.length; i++) {
					var item = routers[i]
					if (item.url == currentRouter) {
						currentType = item
						break
					}
				}
				if (currentType.url == 'views/Index') {
					// LoginType 1企业 2个人
					if (this.LoginType == 1) {
						currentType.type = 'resume'
					} else if (this.LoginType == 2) {
						currentType.type = 'job'
					}
				}
				uni.navigateTo({
					url: `/commonViews/SearchIndex?type=${currentType.type}`
				})
			},
			setKeyword(keyword) {
				this.keyword = keyword
			},
			// 搜索事件传递
			handleEmit() {
				this.$emit('handleSearch', this.keyword)
				// this.keyword = ''
			},
			handleIptClear() {
				this.$emit('handleClear', this.keyword)
			},
			// 返回
			goback() {
				var pages = getCurrentPages(); // 获取当前挂载的路由数组
				var prePage = pages[pages.length - 1] //获取 上一个页面
				uni.navigateBack({
					delta: 1
				})
			},
			goIndex() {
				uni.reLaunch({
					url: '/views/Index'
				})
			},
			// 获取系统配置
			sysInfo() {
				uni.getSystemInfo({
					success: (res) => {
						const menuButton = uni.getMenuButtonBoundingClientRect() // 胶囊
						const {
							windowWidth,
							windowHeight
						} = uni.getSystemInfoSync(); // 屏幕信息
						const navBarPadding = (menuButton.top - res.statusBarHeight) * 2
						let statusBarHeight = res.statusBarHeight
						let navHeight = menuButton.height + navBarPadding
						let headerHeight = navHeight + statusBarHeight
						this.menuButtonPaddingRight = windowWidth - menuButton.right
						this.menuButtonWidth = menuButton.width
						this.navHeight = headerHeight
						this.statusBarHeight = statusBarHeight
						// 详情页面宽度 
						this.publicWidthInfo = {
							width: (windowWidth - this.menuButtonPaddingRight - this.menuButtonWidth - this
								.menuButtonPaddingRight) + 'px',
							titleWidth: ((windowWidth - this.menuButtonPaddingRight - this
									.menuButtonWidth - this.menuButtonPaddingRight) - this
								.menuButtonWidth) + 'px',
							iconWidth: this.menuButtonWidth - 30 + 'px',
							height: this.navHeight + 'px'
						}

					}
				})
			},
			countScrollWidth() {
				let info = uni.createSelectorQuery().in(this).select(".titleText");
				info.boundingClientRect((data) => {
					this.scrollWidth = (data.width + 15) * 2
					if (data.width > parseInt(this.publicWidthInfo.titleWidth)) {
						this.isScroll = false
					}
				}).exec(function(res) {
					// 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据
				})
			},
			// 提示弹窗关闭
			handleTipsClose() {
				if (this.time) {
					clearTimeout(this.time)
				}
				this.setHeadTips(!this.isHeadTips)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headWrapper {
		position: relative;
	}

	.fiexd {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		z-index: 999;
	}

	.isFiexdShadow {
		background: #fff;
		box-shadow: 0 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
	}

	.navPlaceholder {
		background: transparent;
	}

	.header-wrap {
		width: 100%;
		position: relative;
		background: transparent;

		.detailHead,
		.indexHead,
		.listHead,
		.jobListHead,
		.searchHead,
		.publicHead {
			height: 100%;
			display: flex;
			align-items: center;

			&.whiteBg {
				background: #fff;
			}
		}

		.companyDetailHead {
			background: #fff;
		}

		.leftIcon {
			flex-shrink: 0;
			display: flex;
			align-items: center;

			.back {
				width: 50rpx;
				height: 50rpx;
				background: url('../static/img/Head/back.png') no-repeat center center;
				background-size: 17rpx 30rpx;
				margin-right: 20rpx;

				&.whiteBack {
					background: url('../static/img/Head/backWhite.png') no-repeat center center;
					background-size: 17rpx 30rpx;
				}
			}

			.home {
				width: 50rpx;
				height: 50rpx;
				background: url('../static/img/Head/home.png') no-repeat center center;
				background-size: 34rpx 34rpx;

				&.whiteHome {
					background: url('../static/img/Head/homeWhite.png') no-repeat center center;
					background-size: 34rpx 34rpx;
				}
			}

			.search {
				width: 50rpx;
				height: 50rpx;
				background: url('../static/img/Head/search.png') no-repeat center center;
				background-size: 31rpx 32rpx;
			}
		}

		.indexHead {
			.logo {
				width: 172rpx;
				height: 64rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.jobListHead {
			.address {
				width: 50rpx;
				height: 50rpx;
				background: url('../static/img/Head/address.png') no-repeat center center;
				background-size: 38rpx 40rpx;
				position: relative;

				.addrText {
					/* #ifdef MP-TOUTIAO */
					position: absolute;
					right: -56rpx;
					top: -24rpx;
					color: #fff;
					background: #1360ff;
					border-radius: 20rpx 20rpx 20rpx 0;
					white-space: nowrap;
					padding: 8rpx 18rpx;
					font-size: 20rpx;
					/* #endif */
					/* #ifdef MP-WEIXIN */
					position: absolute;
					right: -51rpx;
					top: -15rpx;
					color: #fff;
					background: #1360ff;
					border-radius: 25rpx 25rpx 25rpx 0;
					white-space: nowrap;
					padding: 4rpx 16rpx;
					font-size: 20rpx;
					/* #endif */
				}
			}
		}

		.title {
			margin: 0 auto;
			flex-shrink: 0;
			text-align: center;
			color: #222222;
			font-size: 36rpx;
			font-weight: bold;
			overflow: hidden;

			.titleText {
				white-space: nowrap;

				&.titleTextWhite {
					color: #fff;
				}
			}

			.scrollBox {
				white-space: nowrap;
				animation: scrollToRight 5s 0.1s linear infinite;
				font-size: 0;

				.scrollInner {
					font-size: 36rpx;
				}

				.space {
					display: inline-block;
					width: 30rpx;
				}
			}
		}
	}

	.collectTips {
		background: linear-gradient(45deg, #1360FF, #4381FF);
		box-shadow: 0px 0px 40px 0px rgba(11, 64, 255, 0.28);
		color: #fff;
		font-size: 26rpx;
		border-radius: 40rpx;

		// #ifdef MP-WEIXIN
		position: absolute;
		right: 42rpx;
		bottom: -70rpx;
		// #endif
		// #ifdef MP-TOUTIAO || MP-ALIPAY
		position: fixed;
		right: 42rpx;
		top: 10rpx;
		// #endif
		z-index: 1000;
		padding: 18rpx 27rpx 18rpx 43rpx;
		letter-spacing: 3rpx;

		.tipsClose {
			margin-left: 30rpx;
		}

		&::before {
			content: '';
			border: 12rpx solid transparent;
			border-bottom: 12rpx solid #417fff;
			position: absolute;
			top: -20rpx;
			right: 88rpx;
		}
	}

	@keyframes scrollToRight {
		from {
			transform: translate3d(0%, 0, 0);
		}

		to {
			transform: translate3d(-50%, 0, 0);
		}
	}

	// 兼容抖音小程序
	.toutiao {

		.search {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 23rpx 30rpx 30rpx;

			::v-deep .u-input {
				font-size: 28rpx;
				color: #838383;
			}

			.logo {
				width: 172rpx;
				height: 64rpx;
				margin-right: 20rpx;
				flex-shrink: 0;

				image {
					width: 100%;
					height: 100%;
					/* #ifdef MP-WEIXIN */
					width: 110%;
					height: 110%;
					/* #endif */
					display: flex;
				}
			}
		}

		.list {
			padding: 23rpx 30rpx 0rpx;
		}
	}
</style>